import React from 'react';
import { Button, Col, Drawer, Form, Input, Row, Select, Space, Spin } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import pageStyles from '@/common/pageLayout.less';

export const DetailDrawerCheckFormView: React.FC<TempContractManageAPI.IDetailDrawerCheckFormView> = ({
  detailDomId,
  isShowDrawer,
  onClose,
  tempDetailInfo,
}) => {
  /** 模板审核根节点 */
  const prefixCls = 'tempcontract-detail-';

  /** 表单实例 */
  const [checkForm] = Form.useForm();

  /** 审核表单底部操作 */
  const checkFormFooter = () => {
    return (
      <Space
        align="center"
        style={{
          width: '100%',
          justifyContent: 'center',
        }}
      >
        <Button
          loading={false}
          onClick={onClose}
        >
          取消
        </Button>
        <Button
          type="primary"
          loading={false}
        >
          确定
        </Button>
      </Space>
    );
  };

  return (
    <Drawer
      className={`${prefixCls}detailDrawerCheckForm`}
      title="审核范本"
      style={{ position: 'absolute', overflow: 'hidden' }}
      placement="bottom"
      onClose={onClose}
      open={isShowDrawer}
      width={document.body?.clientWidth * 0.4}
      headerStyle={{ padding: '1rem' }}
      closable={false}
      destroyOnClose={true}
      bodyStyle={{ padding: '20px' }}
      mask={false}
      getContainer={() => document.getElementById(detailDomId) as any}
      extra={<CloseOutlined onClick={onClose} />}
      footer={checkFormFooter()}
    >
      <Spin spinning={false}>
        <div className={pageStyles['fromView-styles']}>
          <Form form={checkForm}>
            <Row>
              <Col span={24}>
                <Form.Item
                  name="checkState"
                  label="审核结果"
                  rules={[
                    {
                      required: true,
                      message: '请选择审核结果',
                    },
                  ]}
                >
                  <Select placeholder="请选择审核结果" allowClear loading={false}>
                    <Select.Option value={'1'}>通过</Select.Option>
                    <Select.Option value={'2'}>驳回</Select.Option>
                    <Select.Option value={'3'}>作废</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  label="审核原因"
                  name="checkResult"
                  rules={[
                    {
                      required: true,
                      message: '请填写审核结果',
                    },
                  ]}
                >
                  <Input.TextArea
                    placeholder={`请填写审核原因`}
                    showCount
                    maxLength={200}
                    autoSize={{ minRows: 2, maxRows: 4 }}
                  />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </div>
      </Spin>
    </Drawer>
  );
};
